<template>
	<view class="">
	  <!-- 顶部个人信息 -->
	  <view class="bg-white">
		  <cu-custom bgColor="bg-gradual-write" :isBack="false">
		  	<block slot="backText"></block>
		  	<block slot="content"></block>
		  </cu-custom>
	    <view class="flex padding">
	      <view class="padding-lr-xs">
	        <view class="cu-avatar lg round" :style="{backgroundImage: 'url(' + user.avatarUrl + ')'}">
	        </view>
	      </view>
	      <view class="padding-xs text-xl text-black" @tap="toLogin">
	        <view>{{user.nickName ? 'Hello，'+ user.nickName : '未登录'}}</view>
	        <view class="cu-tag round line-green sm">{{user.sex == 2 ? '未知' : (user.sex == 0 ? '男' : '女')}} ></view>
	      </view>
	    </view>
	  </view>
	  <!-- 基本数据 -->
	  <view class="cu-list grid col-2 no-border padding-lr-xs radius-lg-bottom">
	    <view class="cu-item" @tap="goPage('/other_pages/recharge-card/card_package')">
	      <view class="text-black text-bold text-xxl">
	        {{card.length}}
	      </view>
	      <text>我的卡包</text>
	    </view>
	    <view class="cu-item" @tap="goPage('/other_pages/recharge/account')">
	      <view class="text-black text-bold text-xxl">
	        {{balance}}
	      </view>
	      <text>我的余额</text>
	    </view>
	  </view>
	  <!-- 其他功能 -->
	  <view class="cu-bar margin-lr-xs margin-top grid col-4 no-border bg-white radius-lg-top">
	    <view class="action">
	      <text class="text-xl">其他功能</text>
	    </view>
	  </view>
	  <view class="cu-list grid col-4 no-border text-black margin-lr-xs padding-bottom radius-lg-bottom">
	    <view class="cu-item" v-for="(item,index) in iconOtherList" :key="index" :bindtap="item.bindtap" @tap="goPage(item.url)">
	      <view :class="['cuIcon-'+item.icon,'text-'+item.color,'text-shadow']" style="font-size: 56rpx;">
	        <view class="cu-tag badge" v-if="item.badge!=0">
	          <block v-if="item.badge!=1">{{item.badge>99?"99+":item.badge}}</block>
	        </view>
	      </view>
	      <text>{{item.name}}</text>
	    </view>
	  </view>
	
	</view>
</template>

<script>
	import {
		AppType
	} from '@/utils/constant.js'
	import { getToken } from '@/utils/auth'
	export default {
		data() {
			return {			 
				    iconOtherList: [{
				      icon: 'rank',
				      color: 'blue',
				      badge: 0,
				      name: '排行榜',
					  url: '/other_pages/rank/index',
				      bindtap: "bindZan"
				    }, {
				      icon: 'service',
				      color: 'blue',
				      badge: 0,
				      name: '联系客服',
					  url: '/other_pages/kefu/index', 
				      bindtap: "bindZan"
				    }, {
				      icon: 'settings',
				      color: 'blue',
				      badge: 0,
				      name: '设置',
					  url: '/pages/setting/setting',	
				      bindtap: "bindZan"
				    }]
			}
		},
		onLoad() {
			console.info('storage_data', uni.getStorageSync('storage_data')),
			console.info('appType', uni.getStorageSync('appType'))
		},
		computed	: {
		    i18n() {
		        return this.$t('index')
		    },
		    user(){
				console.info('user', this.$store.state.user.user)
				const appType = uni.getStorageSync('appType')
				if (appType === AppType.MP) {
					return this.$store.state.user.user;
				}else{
					if(this.$store.state.user.user){
						return JSON.parse(this.$store.state.user.user)
					}else{
						return {};
					}
				}
		    },
			balance(){
				console.info('balance', this.$store.state.user.balance)
				if(this.$store.state.user.balance){
					return this.$store.state.user.balance;
				}else{
					return 0;
				}
			},
			card(){
				console.info('card', this.$store.state.user.card)
				if(this.$store.state.user.card){
					return JSON.parse(this.$store.state.user.card)
				}else{
					return [];
				}
			},
		    appMp(){
		        return uni.getStorageSync('appType')== AppType.MP
		    }
		},
		onPageScroll(e) {
		    this.scrollTop = e.scrollTop;
		},
		methods: {
			toLogin(){
				if(getToken()){
					return;
				}else{
					this.$tab.navigateTo('/pages/login/index')
				}
			},
			goPage(url) {
				console.info(this.$store.state.user.balance)
				this.$tab.navigateTo(url)
			},			
		}
	}
</script>

<style>
</style>
